In This Topic
Tutorials / ASP.NET MVC Razor / Custom Snap-In implementation

Custom Snap-In implementation

In This Topic
This tutorial assumes that you have fully followed the Your first DocuVieware MVC Razor page tutorial first as its starting point is the end of it.
 Overview

Snap-Ins are very powerful interface elements that can be used for various purposes. DocuVieware™ comes with several handy built-in snap-ins such as the Thumbnails, Bookmarks, Text Search or Annotations palette.

This tutorial shows how to create a very simple Custom Snap-In with a button that will trigger a Custom Action server-side to return a message.

You are going to implement a Custom Snap-In that will contain a simple button which action will be to send a "ping" command to the server and it will reply with a "pong" message.

DocuVieware™ requires .NET Framework 4.6 or above.
The screenshots have been taken using Visual Studio 2015 and GdPicture.NET™ 14, it may differ from the current release.
 Preparing the Custom Snap-In content

Step 1: Add mandatory imports you will need in the Index.cshtml view file.

Adding mandatory imports.
Copy Code 
@using System.Web.UI.HtmlControls;
@using System.Drawing;

Step 2: Implement an utility function that converts a .NET Color object to an hexadecimal value you can actually use in HTML.

Utility function.
Copy Code 
@functions
{
    private static string HexConverter(Color c)
    {
       return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
    }
}

Step 3: Build the content of the Custom Snap-In and add it to the DocuVieware™ control between its declaration and the rendering, like this:

Building the content of the Custom Snap-In.
Copy Code 
@{
    GdPicture14.WEB.DocuVieware docuVieware = new GdPicture14.WEB.DocuVieware
    {
       ID = "DocuVieware1",
       Height = new System.Web.UI.WebControls.Unit("100%"),
       Width = new System.Web.UI.WebControls.Unit("100%")
    };
    using (HtmlGenericControl icon = new HtmlGenericControl("svg"))
    {
       icon.Attributes["viewBox"] = "0 0 16 16";
       icon.Attributes["width"] = "100%";
       icon.Attributes["height"] = "100%";
       icon.InnerHtml = "<path d=\"M6 0l-6 8h6l-4 8 14-10h-8l6-6z\"></path>";
      using (HtmlGenericControl panel = new HtmlGenericControl("div"))
       {
          panel.ClientIDMode = ClientIDMode.Static;
          panel.ID = "customSnapInTutorialPanel" + docuVieware.UniqueID;
          using (HtmlGenericControl customSnapInTutorialButtonDiv = new HtmlGenericControl("div"))
          {
             customSnapInTutorialButtonDiv.Style["float"] = "left";
             customSnapInTutorialButtonDiv.Style["margin-top"] = "6px";
             customSnapInTutorialButtonDiv.Style["margin-left"] = "6px";
             using (HtmlGenericControl customSnapInTutorialButton = new HtmlGenericControl("button"))
             {
                customSnapInTutorialButton.ID = "customSnapInSubmit" + docuVieware.UniqueID;
                customSnapInTutorialButton.Style["height"] = "26px";
                customSnapInTutorialButton.Style["background-color"] = HexConverter(docuVieware.ActiveSelectedColor);
                customSnapInTutorialButton.InnerHtml = "Ping";
                customSnapInTutorialButton.Attributes["class"] = "btn-valid";
                customSnapInTutorialButton.Attributes["onclick"] = "ping(); return false;";
                customSnapInTutorialButtonDiv.Controls.Add(customSnapInTutorialButton);
             }
             panel.Controls.Add(customSnapInTutorialButtonDiv);
          }
          docuVieware.AddCustomSnapIn("customSnapInTutorial", "Custom Snap-In", icon, panel, true);
       }
    }
    docuVieware.RenderControl(Output);
 }

Step 4: Add the JavaScript function called on the snap-in button click event that will trigger the custom action, like this:

Adding the JavaScript function.
Copy Code 
<script>
    function ping() {
       DocuViewareAPI.PostCustomServerAction("DocuVieware1", true, "ping");
    }
</script>
 Handling your action server side

As seen in the Client/Server coming and going with Custom Actions tutorial, you are going to implement a simple custom action that will process the snap-in button click event.

All you need to do now is add the custom action event handler in the Global.asax.cs file like this:

Handling the action server side.
Copy Code 
private void CustomActionsHandler(object sender, CustomActionEventArgs e)
{
    if ((e.actionName == "ping"))
    {
       e.message = new DocuViewareMessage("Pong", icon: DocuViewareMessageIcon.Information);
    }
}

Compile and start the page, the custom Snap-In icon will appear in the left panel.

Now, if you select it and click on the ping button, it will trigger the custom action and you should see a "Pong" message coming back from the server.

See Also
Your first DocuVieware MVC Razor page
Client/Server coming and going with Custom Actions